HTML Contd 


In this topic, we will be learning 4 new HTML 
elements namely, <div>, <span>, <textarea>, 
and <table>. 


<div> element 


The <div> tag creates a division or a section in an HTML document. It 
creates a block container element that makes it easy to style the elements 
inside by using the id attribute or manipulate using JavaScript. 


id="button-group"> 
>Like</ 
>Comment</ 
>Subscribe</ 


id="button-group-2"> 
src="hello.png"> 


above will result in: 


Team | Like | Comment || Subscribe 


ae 
tps: //cdn.pixabay. com/photo/2015/04/23/22/00/tre 
e-736885__480.jpg"> 
9 </div> 


<span> element 


The <span> tag creates an inline container element used to to target a 
part of a text or document. Just like <div>, <span> makes it easy to 
style the elements targetted by using the id attribute or manipulate using 
JavaScript. 


HTML = Tidy 


My mother has blue eyes. 


1 <p>My mother has <span >blue</span> 
eyes.</p> 


<textarea> element 


The <textarea> tag creates a text area that can hold unlimited number 
of characters. The size of the text area is specified by the Lines and 
cols attributes. For example, 


Siniirial 


result in: 


ile (Initial text 


You. can get or set the value in JavaScript by using 
textAreaE Lement. value function. For example, 


Get Value: 


é 


Set Value: 


EIEMm (Changed text! 
| 


<table> element 


Each HTML table consists of: 


e one <table> element, containing 


- a ‘<thead> element to group header rows in an 
HTML table and a ‘<tbody>’ element to group the body 
content in an HTML table, each containing 


= one or more <tr> elements which defines a 
table row, containing 


- ‘<th>* elements representing a header cell 
or ‘<td>’ elements representing a standard data 
cell. 


Header Of A Table 


<table> 
<thead> 
0 Sl 
<th>First Name</th> 
<th>Last Name</th> 
</tr> 
</thead> 
</table> 


This creates a table with one header row and two header columns, each 
specified by the <th> tag: 


HTML ¥ First Name Last Name 


<table> 
<thead> 
<tr> 


<th>Last Name</th> 
</tr> 
</thead> 


aL 

2 

3 

4 <th>First Name</th> 
5 

6 

7 

8 </table> 


Body Of A Table 


<table> 
<thead> 
4 il 
<th>First Name</th> 
<th>Last Name</th> 
</tr> 
</thead> 


<tbody> 
<i p> 
<td>Princess</td> 
<td>Carolyn</td> 
< / e 
KEE. <) EES 
</tbody> 
</table> 


Within the <tbody> element, a row is added to the table by using the 
<tr> tag. We defined two <td> elements within the <tr> element to 
create two data cells in the table row: 


HTML ¥ ere 
First Name Last Name 
1 <table> : : 
5 renee Princess Carolyn 
3 <En> 
4 <th>First Name</th> 
5 <th>Last Name</th> 
6 </tr> 
7 </thead> 
8 <tbody> 
<tr> 
<td>Princess</td> 
<td>Carolyn</td> 
</tr> 
<ER>SC/ERS 
</tbody> 
15 </table> 
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